<template>
	<div>
		<div class="back">
			<el-backtop></el-backtop>
		</div>
		<h1>这是博客列表页</h1>
		<template>
			<el-card v-for="item in articleList" :key="item.id">
				<el-row class="sectitle" @click.native="toArticle(item.id)">{{item.title}}</el-row>
				<el-row class="secsummary">{{item.summary}}</el-row>
				<el-row :gutter="20">
					<el-col :span="12" :xs="6" class="seccreatedTime">{{item.created_time}}</el-col>
					<el-col :span="8" :xs="10" class="sectag">
						标签：{{item.tag}}
					</el-col>
					<el-col :span="4" :xs="8" class="secclassifica">分类：{{item.classifica}}</el-col>
				</el-row>
			</el-card>
		</template>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				articleList: []
			};
		},
		methods: {
			async getAllArticles() {
				const {
					data: res
				} = await this.$http.get('article')
				console.log(res);
				if (res.meta.status != 200) return this.$message.error('获取博客列表失败')
				this.articleList = res.data.articles
			},
			async toArticle(id) {
				const {
					data: res
				} = await this.$http.get('article/' + id)
				console.log(res);
				if (res.meta.status != 200) return this.$message.error('诶呀，找不到这篇博客了！')
				this.$router.push({
					name: 'article',
					params: {
						'article':res.data
					}
				})
			}
		},
		created() {
			this.getAllArticles();
		}
	};
</script>
<style lang="less" scoped>
	.el-card {
		background-color: rgba(119, 119, 119, 0.4);
		border: none;
		color: #fff;
		opacity: 0.6;
		width: 100%;
		max-width: 900px;
		margin: 15px auto;

		.el-row {
			margin: 15px 0;
		}

		.sectitle {
			color: #21759b;
			font-size: 24px;
			margin-bottom: 30px;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}

		.secsummary {
			font-size: 16px;
		}

		.seccreatedTime,
		.sectag,
		.secclassifica {
			opacity: 0.5;
			font-size: 14px;
		}
	}
</style>
